import { useState } from "react"
import { Button, NavBar, Form, Input, Toast, Modal } from "antd-mobile"
import orc from "./img/orc.png"
import http from "./utils/http"
function App() {
  const [visible, setVisible] = useState(false)
  const [fileData, setFileData] = useState()
  const [from] = Form.useForm()
  const handleSend = () => {
    const inputDom = document.createElement("input")
    inputDom.type = "file"
    inputDom.click()
    inputDom.onchange = () => {
      const file = inputDom.files[0]
      setFileData(file)
      if (file.type != "image/png") {
        Toast.show({
          icon: "fail",
          content: "只能上传图片",
        })
      } else {
        setVisible(true)
      }
    }
  }
  const handelOcr = async () => {
    setVisible(false)
    const file = new FormData()
    file.append("file", fileData)
    const result = await http.post("/api/orc/upload/image", file)
    const { code, data } = result.data
    if (code === 200) {
      Toast.show({
        icon: "success",
        content: "识别成功",
      })
      console.log(data)
      from.setFieldsValue(data)
      from.setFieldValue("perclass", "成人")
      from.setFieldValue("codeclass", "大陆身份证")
      from.setFieldValue("phone", 17652940118)
    }
  }
  return (
    <div>
      <NavBar>新增乘客</NavBar>
      <Button block shape="rounded" onClick={() => handleSend()}>
        扫描证件添加
      </Button>
      <Form
        form={from}
        layout="horizontal"
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }>
        <Form.Item
          name="perclass"
          label="乘客类型"
          rules={[{ required: true, message: "乘客类型不能为空" }]}>
          <Input  placeholder="请输入乘客类型" />
        </Form.Item>
        <Form.Item
          name="name"
          label="姓名"
          rules={[{ required: true, message: "姓名不能为空" }]}>
          <Input  placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item
          name="codeclass"
          label="证件类型"
          rules={[{ required: true, message: "证件类型不能为空" }]}>
          <Input  placeholder="请输入证件类型" />
        </Form.Item>
        <Form.Item
          name="code"
          label="证件号码"
          rules={[{ required: true, message: "证件号码不能为空" }]}>
          <Input  placeholder="请输入证件号码" />
        </Form.Item>
        <Form.Item
          name="phone"
          label="手机号码"
          rules={[{ required: true, message: "手机号码不能为空" }]}>
          <Input  placeholder="请输入手机号码" />
        </Form.Item>
      </Form>
      <Modal
        visible={visible}
        content={
          <div>
            <img src={orc}></img>
            <Button block color="primary" onClick={() => handelOcr()}>
              识别
            </Button>
          </div>
        }
        closeOnAction
        onClose={() => {
          setVisible(false)
        }}
      />
    </div>
  )
}

export default App
